<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>小兔鲜儿 - 新鲜 惠民 快捷！</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="./images/favicon.ico">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/register.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

<body>
    <!-- 项部导航 -->
    <div class="xtx_topnav">
        <div class="wrapper">
            <!-- 顶部导航 -->
            <ul class="xtx_navs">
                <li>
                    <a href="./login.html">请先登录</a>
                </li>
                <li>
                    <a href="./register.html">免费注册</a>
                </li>
                <li>
                    <a href="javascript:;">我的订单</a>
                </li>
                <li>
                    <a href="javascript:;">会员中心</a>
                </li>
                <li>
                    <a href="javascript:;">帮助中心</a>
                </li>
                <li>
                    <a href="javascript:;">在线客服</a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="mobile sprites"></i> 手机版
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="xtx_header">
        <div class="wrapper">
            <!-- 网站Logo -->
            <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
            <!-- 主导航 -->
            <div class="xtx_navs">
                <ul class="clearfix">
                    <li>
                        <a href="./index.html">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;">生鲜</a>
                    </li>
                    <li>
                        <a href="javascript:;">美食</a>
                    </li>
                    <li>
                        <a href="javascript:;">餐厨</a>
                    </li>
                    <li>
                        <a href="javascript:;">电器</a>
                    </li>
                    <li>
                        <a href="javascript:;">居家</a>
                    </li>
                    <li>
                        <a href="javascript:;">洗护</a>
                    </li>
                    <li>
                        <a href="javascript:;">孕婴</a>
                    </li>
                    <li>
                        <a href="javascript:;">服装</a>
                    </li>
                </ul>
            </div>
            <!-- 站内搜索 -->
            <div class="xtx_search clearfix">
                <!-- 购物车 -->
                <a href="cart.html" class="xtx_search_cart sprites">
                    <i>0</i>
                </a>
                <!-- 搜索框 -->
                <div class="xtx_search_wrapper">
                    <input type="text" placeholder="搜一搜" onclick="location.href='javascript:;'">
                </div>
            </div>
        </div>
    </div>
    <div class="xtx-wrapper">
        <div class="container">
            <!-- 卡片 -->
            <div class="xtx-card">
                <h3>新用户注册</h3>
                <form class="xtx-form">
                    <div data-prop="username" class="xtx-form-item">
                        <span class="iconfont icon-zhanghao"></span>
                        <input name="username" type="text" placeholder="设置用户名称">
                        <span class="msg"></span>
                    </div>
                    <div data-prop="phone" class="xtx-form-item">
                        <span class="iconfont icon-shouji"></span>
                        <input name="phone" type="text" placeholder="输入手机号码  ">
                        <span class="msg"></span>
                    </div>
                    <div data-prop="code" class="xtx-form-item">
                        <span class="iconfont icon-zhibiaozhushibiaozhu"></span>
                        <input name="code" type="text" placeholder="短信验证码">
                        <span class="msg"></span>
                        <a class="code" href="javascript:;">发送验证码</a>
                    </div>
                    <div data-prop="password" class="xtx-form-item">
                        <span class="iconfont icon-suo"></span>
                        <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
                        <span class="msg"></span>
                    </div>
                    <div data-prop="confirm" class="xtx-form-item">
                        <span class="iconfont icon-suo"></span>
                        <input name="confirm" type="password" placeholder="请再次输入上面密码">
                        <span class="msg"></span>
                    </div>
                    <div class="xtx-form-item pl50">
                        <i class="iconfont icon-queren"></i> 已阅读并同意
                        <i>《用户服务协议》</i>
                    </div>
                    <div class="xtx-form-item">
                        <button class="submit">立即注册</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 公共底部 -->
    <div class="xtx_footer clearfix">
        <div class="wrapper">
            <!-- 联系我们 -->
            <div class="contact clearfix">
                <dl>
                    <dt>客户服务</dt>
                    <dd class="chat">在线客服</dd>
                    <dd class="feedback">问题反馈</dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd class="weixin">公众号</dd>
                    <dd class="weibo">微博</dd>
                </dl>
                <dl>
                    <dt>下载APP</dt>
                    <dd class="qrcode">
                        <img src="./uploads/qrcode.jpg">
                    </dd>
                    <dd class="download">
                        <span>扫描二维码</span>
                        <span>立马下载APP</span>
                        <a href="javascript:;">下载页面</a>
                    </dd>
                </dl>
                <dl>
                    <dt>服务热线</dt>
                    <dd class="hotline">
                        400-0000-000
                        <small>周一至周日 8:00-18:00</small>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 其它 -->
        <div class="extra">
            <div class="wrapper">
                <!-- 口号 -->
                <div class="slogan">
                    <a href="javascript:;" class="price">价格亲民</a>
                    <a href="javascript:;" class="express">物流快捷</a>
                    <a href="javascript:;" class="quality">品质新鲜</a>
                </div>
                <!-- 版权信息 -->
                <div class="copyright">
                    <p>
                        <a href="javascript:;">关于我们</a>
                        <a href="javascript:;">帮助中心</a>
                        <a href="javascript:;">售后服务</a>
                        <a href="javascript:;">配送与验收</a>
                        <a href="javascript:;">商务合作</a>
                        <a href="javascript:;">搜索推荐</a>
                        <a href="javascript:;">友情链接</a>
                    </p>
                    <p>CopyRight &copy; 小兔鲜儿</p>
                </div>
            </div>
        </div>
    </div>
    <script>
        (function() {
            let code = document.querySelector('.code');
            // 发送验证码
            code.addEventListener('click', function() {
                // 倒计时读秒操作
                code.innerHTML = '05秒后重新获取';
                // 让按钮不在被点击
                code.style.pointerEvents = 'none';
                let num = 5;
                var timer = setInterval(function() {
                    num--;
                    code.innerHTML = '0' + num + '秒后重新获取'; //`0${num}秒后重新获取`
                    if (num === 0) {
                        // 让按钮可以重新点击
                        code.style.pointerEvents = 'auto';
                        code.innerHTML = '重新获取';
                        // 清除定时器
                        clearInterval(timer);
                    }
                }, 1000)
            })

            // 用户昵称验证
            // [name=username] css 属性选择器
            let username = document.querySelector('[name=username]');
            username.addEventListener('change', verifyusername);
            // 验证用户名的函数
            function verifyusername() {
                let span = username.nextElementSibling;
                // 正则表达式 1.定义规则 2.判断
                let reg = /^[a-zA-Z0-9-_]{6,10}$/;
                if (!reg.test(username.value)) {
                    span.innerHTML = '请输入6~10位的字符';
                    return false;
                }
                span.innerHTML = '';
                return true;
            }

            // 手机号码验证
            let phone = document.querySelector('[name=phone]')
            phone.addEventListener('change', verifyphone)
                // 验证手机号的函数
            function verifyphone() {
                let span = phone.nextElementSibling;
                // 正则表达式 1.定义规则 2.判断
                let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
                if (!reg.test(phone.value)) {
                    span.innerHTML = '请输入正确的手机号'
                    return false;
                }
                span.innerHTML = '';
                return true;
            }

            // 短信验证码
            let codeInput = document.querySelector('[name=code]');
            codeInput.addEventListener('change', verifycodeInput);
            // 验证短信验证码的函数
            function verifycodeInput() {
                let span = codeInput.nextElementSibling;
                // 正则表达式 1.定义规则 2.判断
                let reg = /^\d{6}$/;
                if (!reg.test(codeInput.value)) {
                    span.innerHTML = '请输正确的验证码';
                    return false;
                }
                span.innerHTML = '';
                return true;
            }

            // 密码验证
            let password = document.querySelector('[name=password]')
            password.addEventListener('change', verifypassword)
                // 密码验证函数
            function verifypassword() {
                let span = password.nextElementSibling;
                // 正则表达式 1.定义规则 2.判断
                let reg = /^[a-zA-Z0-9-_.]{6,20}$/;
                if (!reg.test(password.value)) {
                    span.innerHTML = '请设置6至20位字母、数字和符号组合';
                    return false;
                }
                span.innerHTML = '';
                return true;
            }

            // 确认密码
            let confirm = document.querySelector('[name=confirm]');
            confirm.addEventListener('change', verifyconfirm)
                // 确认密码函数
            function verifyconfirm() {
                let span = confirm.nextElementSibling;

                if (confirm.value !== password.value) {
                    span.innerHTML = '两次密码不一致';
                    return false;
                }
                span.innerHTML = '';
                return true;
            }

            // 确认协议
            let icon = document.querySelector('.icon-queren');
            icon.addEventListener('click', function() {
                this.classList.toggle('icon-queren2');
            })

            // 表单域阻止默认行为
            let form = document.querySelector('form');
            form.addEventListener('submit', function(e) {
                // 阻止提交
                if (!verifyusername()) {
                    e.preventDefault();
                }
                if (!verifyphone()) {
                    e.preventDefault();
                }
                if (!verifycodeInput()) {
                    e.preventDefault();
                }
                if (!verifypassword()) {
                    e.preventDefault();
                }
                if (!verifyconfirm()) {
                    e.preventDefault();
                }

                // 勾选同意协议
                // classList add() 添加类
                // classList remove() 移除类
                // classList toggle() 切换类
                // classList contains() 是否包含类，如果包含就返回true否则返回false
                if (!icon.classList.contains('icon-queren2')) {
                    alert('请勾选同意协议');
                    e.preventDefault();
                }
            })
        })();
    </script>
</body>

</html>